<template>
	<view class="information">
		<view class="cut-off"></view>
		<view class="portrayal" @click="findimg()" >
			<text>头 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 像：</text>
			<!-- <image :src="params.image"/> -->
			<image :src="a" mode=""></image>
			<uni-icons type="arrowright" size="24" class="right" color="#999" />
		</view>
		<view class="cut-off"></view>
		<view class="input">
			<view class="list">
				<text class="tip">昵 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 称：</text>
				<input class="uni-input" placeholder="请输入昵称" @input="changeInput" v-model="nickName"/>
				<uni-icons type="arrowright" size="24" class="right" color="#999" />
			</view>
			<view class="list">
				<text class="tip">性 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 别：</text>
				<picker @change="bindPickerChange" :value="value" :range="options" class="uni-picker">
					<view>{{ options[params.gender-1] }}</view>
				</picker>
				<uni-icons type="arrowright" size="24" class="right" color="#999" />
			</view>
			<view class="list">
				<text class="tip">出生日期：</text>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" class="uni-picker">
					<view>{{ date }}</view>
				</picker>
				<uni-icons type="arrowright" size="24" class="right" color="#999" />
			</view>
			<view class="list">
				<text class="tip">地 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 区：</text>
				<view class="" @tap="toggleTab('region')" >
					<view  v-if="resultInfo.result!==''" class="flex" style="width: 502rpx; text-align: right;">
						<text>{{resultInfo.result}}</text>
						<uni-icons type="arrowright" size="24" class="right" color="#999" />
					</view>
					<view v-else class="flex" style="color: #999;width: 502rpx;text-align: right;" >请选择地址 <uni-icons type="arrowright" size="24" class="right" color="#999" />
					</view>
				</view>

				
			</view>
			<view class="list flex" @click="changes(params.mobile)">
				<text class="tip">手&nbsp;机 &nbsp;号 ：</text>
				<view class="">
					<text class="mobile">{{params.mobile}}</text> 
					<uni-icons type="arrowright" size="24" class="right" color="#999" />
				</view>
				
			</view>
		</view>
		<w-picker
			mode="region"
			:defaultVal="regionDval"
			:areaCode="['33','3301','330108']"
			:hideArea="false"
			@confirm="onConfirm" 
			ref="region"
			:timeout="true"
		></w-picker>
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
// import { provinceList, cityList, areaList } from '../../../common/area.js';
import wPicker from "@/components/w-picker/w-picker.vue";
import information from '../../../servers/my/information.js';
export default {
	components: { uniIcons ,wPicker},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			options: ['男', '女'],
			date: currentDate,
			params:{
				
			},
			value: '',
			
			nickName: '',
			gender: 1,
		
			multiIndex: [0, 0, 0],
			multiIsIndex: [],
			province: '',
			img_list: [],
			regionDval:[],
			resultInfo:{
				result:""
			},
			city:'',
			province:'',
			area:'',
			citycode:'',
			provincecode:'',
			areacode:'',
			a:''
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	mounted() {
		
	},
	onShow() {
		var _this = this;
		
		uni.showLoading({
			title: '数据正在加载中',
			mask: true,
			complete: function() {
				_this.initData();
			}
		});
	},
	methods: {
		changes(phone){
			uni.navigateTo({
				url:'./changephone?phone='+phone
			})
		},
		bindDateChange(e) {
			this.date = e.target.value;
			this.params.birthDay = e.target.value;
			var da = {
				birthDay : this.params.birthDay
			};
			information.setBirth(da).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '修改成功',
						duration: 2000
					});
				} else {
					uni.showToast({
						title: '请检查网络后重试',
						duration: 2000,
						icon: 'none'
					});
				}
			});
		},
		changeInput(event) {
			console.log(event.target.value.length)
			if(event.target.value.length>10){
				uni.showToast({
					title:'请输入长度小于10的昵称',
					icon:'none'
				})
				return;
			}
			var da = {
				nickName: event.target.value
			};
			information.setNickName(da).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '修改成功',
						duration: 2000
					});
				} else {
					uni.showToast({
						title: '请检查网络后重试',
						duration: 2000,
						icon: 'none'
					});
				}
			});
		},
		bindPickerChange(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			/* this.value.gender = e.target.value; */
			console.log(this.options[e.target.value]);
			this.params.gender = e.target.value + 1;
			information
				.setGender(this.params.gender)
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '请检查网络后重试',
							duration: 2000,
							icon: 'none'
						});
					}
				})
				.catch(err => {});
		},
		toggleTab(str){
			this.$refs[str].show();
		},
		onConfirm(val){
			console.log(val);
			this.province=val.checkArr[0]
			this.city=val.checkArr[1];			
			this.area=val.checkArr[2];
			this.provincecode=val.checkValue[0]
			this.citycode=val.checkValue[1];			
			this.areacode=val.checkValue[2];
			this.resultInfo={...val};
			this.changeList()
		},
		changeList() {
			var da = {
				city:this.city,
				cityCode:this.citycode,
				province:this.province,
				provinceCode:this.provincecode,
				area:this.area,
				areaCode:this.areacode,			
			}
			
			information
				.setLoc(da)
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '请检查网络后重试',
							duration: 2000,
							icon: 'none'
						});
					}
				})
				.catch(err => {});
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 100;
			} else if (type === 'end') {
				year = year;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		bindMultiPickerColumnChange: function(e) {
			console.log(e);
			// console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
			this.multiIndex[e.detail.column] = e.detail.value;
			if (e.detail.column == 0) {
				this.multiArray[1] = this.cityList[e.detail.value];
				this.multiArray[2] = this.areaList[this.multiIndex[0]][0];
			} else if (e.detail.column == 1) {
				this.multiArray[2] = this.areaList[this.multiIndex[0]][this.multiIndex[1]];
			}
			return;

			// this.$forceUpdate()
		},
		initData() {
			information
				.initData()
				.then(res => {
					console.log(res.data)
					var multiIndex = []
					this.params = res.data;
					// this.params.image = this.imgCDNUrl + res.data.avator;
					this.a=this.imgCDNUrl + res.data.avator;
					this.nickName = this.params.nickName;
					this.params.gender = res.data.gender.value
					if(res.data.province||res.data.city||res.data.area){
						this.resultInfo.result=`${res.data.province} ${res.data.city} ${res.data.area}`
					}else{
						this.resultInfo.result=''
					}
					
					this.$set(this.multiIndex,multiIndex)
					console.log(this.resultInfo.result);
					uni.hideLoading();
				})
				.catch(err => {
					console.log(err);
					uni.hideLoading();
				});
		},
		update(params) {
			information
				.save(params)
				.then(res => {})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		findimg() {
			var that = this;
			uni.chooseImage({
				count: 3, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					that.img_list = that.img_list.concat(res.tempFilePaths);
					console.log(JSON.stringify(res.tempFilePaths));
					uni.uploadFile({
						url: that.upFileUrl, //上传地址
						filePath: that.img_list[0], //上传图片本地地址
						name: 'file',
						formData: {
							user: 'test'
						},
						success: uploadFileRes => {
							var jsArr = JSON.parse(uploadFileRes.data);
							 that.initData.image = that.imgCDNUrl + jsArr.msg;
							  that.a = that.imgCDNUrl + jsArr.data;
					
							// that.params.image = that.imgCDNUrl + jsArr.data;
							// console.log(that.a)
							 that.upsetAvator({avator:jsArr.data});
						}
					});
				}
			});
		},
		upsetAvator(da){
			// var da = {
			// 	avator:this.params.avator
			// }
			information
				.setAvator(da)
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							duration: 2000
						});
						// this.params.image = this.imgCDNUrl + da.avator;
					} else {
						uni.showToast({
							title: '请检查网络后重试',
							duration: 2000,
							icon: 'none'
						});
					}
				})
				.catch(err => {});
		}
	}
};
</script>

<style lang="less" scoped>
	.information {
		.portrayal {
			position: relative;
			background: #fff;
			line-height: 190rpx;
			padding: 0 20rpx;
			border-top: 1rpx solid #eeeeee;
			/*no*/
			border-bottom: 1rpx solid #eeeeee;

			/*no*/
			image {
				position: absolute;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				top: 50%;
				right: 50rpx;
				transform: translate(0, -50%);
			}

			.right {
				position: absolute;
				right: 0;
				pointer-events: none;
			}
		}
		.list.flex{
			display: flex;
			justify-content: space-between;
			.mobile{
				margin-right: 20rpx;
			}
		}
		.input {
			background: #fff;
			border-bottom: 1rpx solid #eeeeee;

			/*no*/
			.list {
				position: relative;
				border-top: 1rpx solid #eeeeee;
				/*no*/
				padding: 0 20rpx;
				display: flex;
				line-height: 110rpx;

				.right {
					position: absolute;
					right: 0;
					pointer-events: none;
				}

				.uni-input,
				.uni-picker,
				.cube-btn {
					flex: 1;
					text-align: right;
					height: 110rpx;
					padding-right: 40rpx;
				}

				.cube-select {
					padding: 0;
					line-height: 110rpx;
				}

				.cube-input::after,
				.cube-select::after {
					border: none;
				}
			}
		}
	}
</style>

<style>
	.information .cube-input-field {
		text-align: right;
	}

	.information .cube-select .cube-select-icon {
		display: none;
	}

	.fz-14 {
		font-size: 14px;
	}
</style>
